<template>
    <div class="search">
      <!-- 搜索框 -->
        <form action="/">
        <van-search   v-model="value"  show-action    placeholder="请输入搜索关键词"  @search="onSearch"    @cancel="onCancel"  />
        </form>
        <!-- 搜索历史 -->
        <div class="search-ls">
          <div class="search-ls-txt">
            <p>搜索历史</p>
            <p>全部删除 完成</p>
          </div>
          <div class="search-icon">
            <van-icon name="delete-o" color="#969799" size="4vw"/>
          </div>
        </div>
        <!-- 111111 -->
        <div class="search-txt-one">
          <p>111</p>
          <p><van-icon name="close" color="#969799" size="4vw"/></p>
        </div>
    </div>
</template>
<style lang="less">
body{
  background: #f7f8fa;
}
.search .search-ls{
  background: #fff;
  height: 55px;
  border-bottom: 1px #f5f6f7 solid;
}
.search .search-ls .search-ls-txt{
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
}
.search .search-ls .search-ls-txt p{
  font-size: 14px;
}
.search .search-ls .search-ls-txt p:last-child{
  color: #969799;
}
.search .search-ls .search-icon{
  position: absolute;
  left: 350px;
  top: 95px;

}
.search .search-txt-one{
  display: flex;
  background: #fff;
  justify-content: space-between;
  height: 30px;
}
.search .search-txt-one p{
 margin-left: 10px;
 margin-right: 10px;
 font-size: 14px;
}


</style>
<script>
import { Search,Icon } from 'vant';
import { Toast } from 'vant';
export default{
  components:{
    [Search.name]:Search,
    [Icon.name]:Icon,
  },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
  },

}
</script>